<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>三一 - 问卷调查</title>
    <link href="../../css/component.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .old {
            font-weight: bold !important;
            background-image: none !important;
            color: #000000 !important;
        }
    </style>
    <script type="text/javascript" src="../../js/highcharts.js"></script>
    <script type="text/javascript" src="../../js/drawChart.js"></script>
</h:head>

<h:body>
    <ui:param name="bean" value="#{countryServerReportActionOld}"/>

    <span class="pagetitle">运营报表 —— 国家</span>
    <p:separator/>

    <!-- 右侧页面顶部查询部分 -->
    <h:form id="fsearch">
        <p:calendar value="#{bean.dateStart}" mode="popup" pattern="yyyy-MM-dd" />
        -
        <p:calendar value="#{bean.dateEnd}" mode="popup" pattern="yyyy-MM-dd" />
        &#160;&#160;&#160;

        <p:selectOneMenu id="serverSel" styleClass="queryServer" value="#{bean.queryServer}">
            <f:selectItems value="#{bean.serverItmes}" />
        </p:selectOneMenu>
        &#160;&#160;&#160;
        <p:commandButton value="查询" action="#{bean.search()}" update=":data" ajax="false" />
    </h:form>
    <br/>

    <!-- 数据展示部分，包含表格和图表 -->
    <h:form id="dform">
        <script type="text/javascript">
            $('body').on('click', '.column', function () {
                var selected = $(this).hasClass("highlight");
                $(".column").removeClass("highlight");
                if (!selected) {
                    $(this).addClass("highlight");
                }
            });
        </script>

        <div class="data" id="data">
            <p:panel id="panel3" header="国家汇总数据" style="margin-bottom:10px;">
                <p:dataTable id="dlist4" var="l" frozenColumns="1" scrollable="true"
                             value="#{bean.countryDataList}" resizableColumns="true" paginator="true"
                             paginatorPosition="bottom"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}"
                             rowsPerPageTemplate="15,30" rows="15" style="text-align:center;padding: 0;margin: 0;">
                    <f:facet name="{Exporters}">
                        <h:commandLink styleClass="exporter">
                            <p:graphicImage url="/resources/images/excel.png" height="25px"/>
                            <p:dataExporter type="xls" target="dlist4"
                                            fileName="detailServerData-#{pageHelper.getNewDateDetailStr()}"/>
                        </h:commandLink>
                    </f:facet>
                    <p:column headerText="国家" styleClass="column grcnewUser" sortBy="#{l.tagvalue}">
                        <h:outputLabel value="#{l.tagvalue}"/>
                    </p:column>
                    <p:column headerText="新增帐号数" styleClass="column grcnewUser" sortBy="#{l.newUser}">
                        <h:outputLabel value="#{l.newUser}"/>
                    </p:column>
                    <p:column headerText="新增整体占比" styleClass="column grcavgOnlineTime" sortBy="#{l.newUserAccount}">
                        <h:outputLabel value="#{l.newUserAccount}"/>
                    </p:column>
                    <p:column headerText="活跃账号数" styleClass="column grcactiveUserCount"
                              sortBy="#{l.activeUserCount}">
                        <h:outputLabel value="#{l.activeUserCount}"/>
                    </p:column>
                    <p:column headerText="付费金额#{pageHelper.getMoneyType()}" styleClass="column grcpayCount"
                              sortBy="#{l.payCount}">
                        <h:outputLabel value="#{l.payCount}"/>
                    </p:column>
                    <p:column headerText="付费整体占比" styleClass="column grcavgOnlineTime" sortBy="#{l.payAccout}">
                        <h:outputLabel value="#{l.payAccout}"/>
                        </p:column>
                    <p:column headerText="付费账号数" styleClass="column grcpayUserCount" sortBy="#{l.payUserCount}">
                            <h:outputLabel value="#{l.payUserCount}"/>
                    </p:column>
                    <p:column headerText="活跃付费率" styleClass="column grcactivePayRadio" sortBy="#{l.activePayRadio}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.activePayRadio)}"/>
                    </p:column>
                    <p:column headerText="付费ARPU" styleClass="column grcpayARPU" sortBy="#{l.payARPU}">
                        <h:outputLabel value="#{l.payARPU}"/>
                    </p:column>
                    <p:column headerText="活跃ARPU" styleClass="column grcactiveARPU" sortBy="#{l.activeARPU}">
                        <h:outputLabel value="#{l.activeARPU}"/>
                    </p:column>
                    <p:column headerText="人均在线时长(m)" styleClass="column grcavgOnlineTime" sortBy="#{l.avgOnlineTime}">
                        <h:outputLabel value="#{pageHelper.double2Int(l.avgOnlineTime / 60)}"/>
                    </p:column>
                    <p:column headerText="新增帐号次日留存率" styleClass="column grcthe2Left" sortBy="#{l.the2Left}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.the2Left)}"/>
                    </p:column>
                    <p:column headerText="新增帐号3日留存率" styleClass="column grcthe3Left" sortBy="#{l.the3Left}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.the3Left)}"/>
                    </p:column>
                    <p:column headerText="新增帐号7日留存率" styleClass="column grcthe7Left" sortBy="#{l.the7Left}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.the7Left)}"/>
                    </p:column>
                    <p:column headerText="新增帐号14日留存率" styleClass="column grcthe14Left" sortBy="#{l.the14Left}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.the14Left)}"/>
                    </p:column>
                    <p:column headerText="新增帐号30日留存率" styleClass="column grcthe30Left" sortBy="#{l.the30Left}">
                        <h:outputLabel value="#{pageHelper.double2Percent(l.the30Left)}"/>
                    </p:column>
                    <p:column headerText="7日LTV" styleClass="column grcthe7LTV" sortBy="#{l.the7LTV}">
                        <h:outputLabel value="#{l.the7LTV}"/>
                    </p:column>
                    <p:column headerText="14日LTV" styleClass="column grcthe14LTV" sortBy="#{l.the14LTV}">
                        <h:outputLabel value="#{l.the14LTV}"/>
                    </p:column>
                    <p:column headerText="30日LTV" styleClass="column grcthe30LTV" sortBy="#{l.the30LTV}">
                        <h:outputLabel value="#{l.the30LTV}"/>
                    </p:column>
                </p:dataTable>
            </p:panel>
        </div>
    </h:form>

    <!-- 页脚 -->
    <div class="footer"></div>
</h:body>
</html>